<template>
  <div
    style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center"
  >
    <el-statistic
      :value="componentProps.value"
      :precision="componentProps.precision"
      :formatter="componentProps.formatter"
      :group-separator="componentProps.groupSeparator"
      :prefix="componentProps.prefix"
      :suffix="componentProps.suffix"
      :title="componentProps.title"
      :value-style="getValueStyle()"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { ElStatistic } from 'element-plus';
import { useAutoDataBinding } from '@/composables/use-data-binding';
import type { IDataBindingConfig } from '@/components/mt-edit/store/types';

const props = defineProps({
  // 数据绑定配置
  dataBinding: {
    type: Object as () => IDataBindingConfig,
    default: () => ({
      enabled: false,
      sourceId: '',
      dataPointId: '',
      targetProperty: 'value',
      transform: 'number',
      defaultValue: '0',
      updateInterval: 0
    })
  },
  value: {
    type: Number,
    default: 12345
  },
  precision: {
    type: Number,
    default: 0
  },
  formatter: {
    type: Function,
    default: undefined
  },
  groupSeparator: {
    type: String,
    default: ','
  },
  prefix: {
    type: String,
    default: ''
  },
  suffix: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: '统计数值'
  },
  valueColor: {
    type: String,
    default: '#409EFF'
  },
  valueSize: {
    type: String,
    default: '28px'
  },
  titleColor: {
    type: String,
    default: '#606266'
  }
});

// 响应式属性对象（用于数据绑定）
const componentProps = ref({
  value: props.value,
  precision: props.precision,
  formatter: props.formatter,
  groupSeparator: props.groupSeparator,
  prefix: props.prefix,
  suffix: props.suffix,
  title: props.title,
  valueColor: props.valueColor,
  valueSize: props.valueSize,
  titleColor: props.titleColor
});

// 使用数据绑定
const shouldUseDataBinding =
  props.dataBinding && props.dataBinding.enabled && props.dataBinding.targetProperty !== 'hide';
const dataBinding = useAutoDataBinding(
  shouldUseDataBinding ? props.dataBinding : null,
  componentProps.value,
  (property: string, value: any) => {
    // 直接更新响应式对象的属性
    if (componentProps.value.hasOwnProperty(property)) {
      (componentProps.value as any)[property] = value;
    }
  }
);

// 监听 dataBinding 配置变化
watch(
  () => props.dataBinding,
  (newConfig, oldConfig) => {
    // dataBinding配置变化处理
  },
  { deep: true }
);

// 监听props变化，同步到响应式属性对象
watch(
  () => props.value,
  (newValue) => {
    if (!props.dataBinding?.enabled) {
      componentProps.value.value = newValue;
    }
  }
);

watch(
  () => props.precision,
  (newValue) => {
    componentProps.value.precision = newValue;
  }
);
watch(
  () => props.formatter,
  (newValue) => {
    componentProps.value.formatter = newValue;
  }
);
watch(
  () => props.groupSeparator,
  (newValue) => {
    componentProps.value.groupSeparator = newValue;
  }
);
watch(
  () => props.prefix,
  (newValue) => {
    componentProps.value.prefix = newValue;
  }
);
watch(
  () => props.suffix,
  (newValue) => {
    componentProps.value.suffix = newValue;
  }
);
watch(
  () => props.title,
  (newValue) => {
    componentProps.value.title = newValue;
  }
);
watch(
  () => props.valueColor,
  (newValue) => {
    componentProps.value.valueColor = newValue;
  }
);
watch(
  () => props.valueSize,
  (newValue) => {
    componentProps.value.valueSize = newValue;
  }
);
watch(
  () => props.titleColor,
  (newValue) => {
    componentProps.value.titleColor = newValue;
  }
);

const getValueStyle = () => {
  return {
    color: componentProps.value.valueColor,
    fontSize: componentProps.value.valueSize
  };
};
</script>
